<template>
  <div class="app-container">
    <div class="title">试题管理</div>

    <div class="content-area">
      <div class="question-list">
        <div v-for="(question, index) in questions" :key="question.id" class="question-box">
          <div class="question-title">{{ typeName(question.type) }} ({{ index + 1 }}/{{ questions.length }})</div>
          <div class="question-content">
            <p>{{ index + 1 }}.{{ question.topic }}</p>
            <ul class="options">

              <!-- <li v-for="option in parseOptions(question.options)" :key="option.key">
                <input type="radio" :name="'question' + question.id" :value="option.value"
                  :checked="option.key === question.answer" disabled>
                {{ option.value }}
              </li> -->
              <li v-for="option in parseOptions(question.options)" :key="option.key">
                <span class="custom-radio" :class="{ checked: option.key === question.answer }"></span>
                {{ option.value }}
              </li>
            </ul>
            <div class="answer-section">
              <p>答案: {{ question.answer }}</p>
              <!-- <p>解析: {{ question.explanation || '暂无解析' }}</p> -->
            </div>
          </div>
        </div>
      </div>

      <div class="exam-info">
        <div class="info-box">
          <h3>考试信息</h3>
          <p>考试时长: 45.00分钟</p>
          <p>{{ examInfo.name }}</p>
          <p>考试题数: 10道</p>
          <p>试卷总分: 10.0分</p>
          <p>及格分: 60.0分</p>
        </div>
        <div class="answer-card">
          <h3>答题卡</h3>
          <div class="answer-buttons">
            <button v-for="i in questions.length" :key="i" @click="goToQuestion(i - 1)">
              {{ i }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import { getExamPaperQuesstionList } from '@/api/examPaper'
export default {
  name: 'examQuestions',
  created() {
    //访问后端客户接口
    this.id = this.$route.params.id;
    this.getQuesstionBankList();
  },

  data() {
    return {
      questions: [],
      examInfo: {},
      queryParams: {
        pageIndex: 0,
        pageSize: 10,
        type: '',
        fk_t_sctk_chapter_id: '',
        topic: '',
        keyword: ''
      },
      id: null
    }
  },
  methods: {
    async getQuesstionBankList() {

      const { data, total } = await getExamPaperQuesstionList({ t_exam_paper_id: this.id });
      console.log(data);

      this.questions = data.list;
      this.examInfo = data.examMap;
      this.total = total;
    },
    typeName(type) {
      const typeMap = {
        1: '单选题',
        2: '多选题',
        3: '判断题',
        4: '填空题',
        5: '简答题'
      };
      return typeMap[type] || '未知';
    },
    goToQuestion(index) {
      // Scroll to the specified question
      const questionBox = document.querySelector(`.question-box:nth-child(${index + 1})`);
      if (questionBox) {
        questionBox.scrollIntoView({ behavior: 'smooth' });
      }
    },

    parseOptions(options) {
      if (typeof options === 'string') {
        try {
          options = JSON.parse(options);  // 把字符串转成数组
        } catch (e) {
          console.error('JSON解析失败', e);
          return [];
        }
      }
      if (!options || !Array.isArray(options)) {

        return [];
      }

      return options.map(option => ({
        key: option.key,
        value: option.value
      }));
    },
    handleSelectionChange(val) {
      this.selectedRows = val;
    },


  }

}
</script>
<style scoped>
.app-container {
  margin: 10px;
  background: #fff;
  border-radius: 5px;
  padding: 10px;
}

.title {
  display: block;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e8eaec;
}

.content-area {
  display: flex;
}

.question-list {
  flex: 1;
  padding-right: 20px;
}

.question-box {
  border: 1px solid #ddd;
  margin-bottom: 20px;
  padding: 10px;
}

.question-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.question-content p {
  margin: 5px 0;
}

.options {
  list-style: none;
  padding-left: 0;
}

.options li {
  margin: 5px 0;
}

.exam-info {
  width: 300px;
  padding-left: 20px;
}

.info-box,
.answer-card {
  margin-bottom: 20px;
}

.answer-buttons button {
  min-width: 40px;
  /* 固定最小宽度，适应一位数和两位数 */
  height: 40px;
  /* 固定高度 */
  margin: 5px;
  text-align: center;
  /* 文字居中 */
  display: inline-flex;
  /* 使用 flex 布局让文字垂直居中 */
  align-items: center;
  justify-content: center;
  font-size: 16px;
  /* 统一字体大小 */
  padding: 0;
  /* 清除默认内边距 */
}

.custom-radio {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ccc;
  margin-right: 8px;
  cursor: default;
}

.custom-radio::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: transparent;
  transition: all 0.2s ease;
}

.custom-radio.checked::before {
  background-color: #4a90e2;
  /* 蓝色填充 */
}
</style>
